<template>
  <div class="hot">
    <div class="hot-top">
      <img src="../../../../static/img/active1.png" />
      <span>本周热门榜单</span>
      <span class="hot-right">全部榜单  ></span>
    </div>
    <ul class="hot-list" >
      <li class="hot-item" v-for="item in hotList" >
        <img :src="item.url" />
        <p>{{item.title}}</p>
        <p>
          <span class="hot-price">￥{{item.price}}</span> 起
        </p>
      </li>
    </ul>
  </div>
</template>

<script>
  export default{
    props:['hotList'],
    data(){
      return{

      }
    }
  }
</script>

<style>
  .hot{
    margin-top: .2rem;
    background-color: #fff;
    font-size: .28rem;
  }
  .hot-top{
    padding: .2rem;
    position: relative;
  }
  .hot-top img{
    width: .35rem;
    height: .35rem;
  }
  .hot-top span{
    color: #212121;
    font-size: .32rem;
    line-height: .39rem;
  }
  .hot-top span.hot-right{
    position: absolute;
    right: .2rem;
    color: #616161;
    font-size: .28rem;
  }
  .hot-list{
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    height: 3rem;
  }
  .hot-item{
    width: 2rem;
    height: 2rem;
    padding: 0 .1rem;
    display: inline-block;
  }
  .hot-item img{
    width: 100%;
    height: 100%;
  }
  .hot-item p{
    margin-top: .1rem;
    text-align: center;
  }
  .hot-price{
    color: #ff8300;
    font-size: .32rem;
  }
</style>
